<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>示例网站</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <header id="title">
        <span class="icon">
            <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" alt="网站logo">
        </span>
        <nav class="title-nav">
            <ul>
                <li>
                    <span>导航链接1</span>
                </li>
                <li>
                    <span>导航链接2</span>
                </li>
                <li>
                    <span>导航链接3</span>
                </li>
                <li>
                    <span>导航链接4</span>
                </li>
            </ul>
        </nav>
    </header>
    <div>
        <aside>
            <h2>这里以后是一个侧栏，这是侧栏的标题</h2>
            <form action="">
                <div class="formItem">
                    <label for="form_email">请输入邮箱地址:</label>
                    <input type="email" name="email" id="form_email">
                    <div class="form_tip">邮箱地址请按要求格式输入</div>
                </div>
                <div class="formItem">
                    <label for="form_pwd">请输入密码:</label>
                    <input type="password" name="pwd" id="form_pwd">
                </div>
                <div class="formItem">
                    <label for="form_pwd2">请重复输入密码:</label>
                    <input type="password" name="pwd2" id="form_pwd2">
                    <div class="form_tip">密码请为6-16位英文和数字</div>
                </div>
                <div class="formItem">
                    <label for="form_sex">性别：</label>
                    <input type="radio" name="sex" value="male" checked>男
                    <input type="radio" name="sex" value="female">女
                </div>
                <div class="formItem">
                    <label for="form_city">城市</label>
                    <select name="city" id="form_city">
                        <option value="北京">北京</option>
                        <option value="南京">南京</option>
                    </select>
                </div>
                <div class="formItem">
                    <label for="form_hobby">爱好</label>
                    <input type="checkbox" name="hobby" value="sport">运动
                    <input type="checkbox" name="hobby" value="art">艺术
                    <input type="checkbox" name="hobby" value="science">科学
                </div>
                <div class="formItem">
                    <label for="form_des">个人描述</label>
                    <textarea name="des" id="form_des" cols="30" rows="10">这是一个多行输入框，请输入您的个人描述</textarea>
                </div>
                <div class="formItem">
                    <span>
                        <input type="submit" value="确认提交">
                    </span>
                </div>
            </form>
        </aside>
        <section id="content">
            <article>
                <h1>文章一级标题</h1>
                <h2>文章二级标题</h2>
                <section class="info">
                    <span>文章作者</span>
                    <span>文章发表时间</span>
                </section>
                <section class="main">
                    <p>
                        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
                        <br>换行了
                        <br> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了
                        <br> 这是一个很长很长的段落，这是一个很长很长的段落，
                        <a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落
                        <b>这里有个粗体字</b>，这是一个很长很长的段落，
                    </p>

                    <div>
                        <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet" />
                    </div>
                    <p>
                        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
                        <br>换行了
                        <br> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了
                        <br> 这是一个很长很长的段落，这是一个很长很长的段落，
                        <a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落
                        <b>这里有个粗体字</b>，这是一个很长很长的段落，
                    </p>

                </section>
            </article>
            <article>
                <h1>另一篇文章一级标题</h1>
                <h2>文章二级标题</h2>
                <section class="info">
                    <span>文章作者</span>
                    <span>文章发表时间</span>
                </section>
                <section class="main">
                    <p>
                        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
                        <br>换行了
                        <br> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了
                        <br> 这是一个很长很长的段落，这是一个很长很长的段落，
                        <a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落
                        <b>这里有个粗体字</b>，这是一个很长很长的段落，
                    </p>

                    <div>
                        <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet" />
                    </div>
                    <ul class="no-listItem">
                        <li>列表项目1</li>
                        <li>列表项目2</li>
                        <li>列表项目3</li>
                        <li>列表项目4</li>
                    </ul>
                </section>

            </article>
            <article class="pic">
                <h2>图片</h2>

                <div class="picwarp">
                    <div>好看的图片</div>
                    <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet">
                </div>
                <div class="picwarp">
                    <div>好看的图片</div>
                    <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet">
                </div>
                <div class="picwarp">
                    <div>好看的图片</div>
                    <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet">
                </div>
                <div class="picwarp">
                    <div>好看的图片</div>
                    <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet">
                </div>
                <div class="picwarp">
                    <div>好看的图片</div>
                    <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet">
                </div>
                <div class="picwarp">
                    <div>好看的图片</div>
                    <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet">
                </div>
                <div class="picwarp">
                    <div>好看的图片</div>
                    <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet">
                </div>
                <div class="picwarp">
                    <div>好看的图片</div>
                    <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet">
                </div>
                <div class="picwarp">
                    <div>好看的图片</div>
                    <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet">
                </div>
                <div class="picwarp">
                    <div>好看的图片</div>
                    <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet">
                </div>


            </article>
            <article>
                <h1>最后一篇文章一级标题</h1>
                <h2>文章二级标题</h2>
                <section class="info">
                    <span>文章作者</span>
                    <span>文章发表时间</span>
                </section>
                <ol>
                    <li>排名1</li>
                    <li>排名2</li>
                    <li>排名3</li>
                </ol>
                <table border=1>
                    <thead>
                        <tr>
                            <td>表头</td>
                            <td>表头</td>
                            <td>表头</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>表内容单元格</td>
                            <td>表内容单元格</td>
                            <td>
                                <a href="javascript:">操作</a>
                            </td>
                        </tr>
                        <tr>
                            <td>表内容单元格</td>
                            <td>表内容单元格</td>
                            <td>
                                <a href="javascript:">操作</a>
                            </td>
                        </tr>
                        <tr>
                            <td>表内容单元格</td>
                            <td>表内容单元格</td>
                            <td>
                                <a href="javascript:">操作</a>
                            </td>
                        </tr>
                        <tr>
                            <td>表内容单元格</td>
                            <td>表内容单元格</td>
                            <td>
                                <a href="javascript:">操作</a>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>总计</td>
                            <td colspan="2">1000</td>
                        </tr>
                    </tfoot>
                </table>
            </article>
        </section>
    </div>


    

    <footer>
        版权所有©
    </footer>
</body>

</html>